import React, { Component } from 'react';
import { Button , Card , Row , Col, Layout, Menu} from 'antd';
import './App.css';
const { Header, Footer, Sider, Content } = Layout;

class App extends Component {


  render() {
    return (

      <Layout>
      <Header class = "App-header"><Clock />      
      <div className="logo" />
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['2']}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
      </Header>
      <Layout>
        <Sider style={{ backgroundColor: '#ECECEC' }}>Sider</Sider>
        <Content >      
          <div className="App">
            
            <MyComponent />
          </div>
        </Content>
        <Sider style={{ backgroundColor: '#ECECEC' }}>Sider</Sider>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>

    );
  }
}

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h2 style={{ Color: "#ECECEC" }}>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}


class MyComponent extends React.Component {
  state = {
    error: null,
    isLoaded: false,
    items: []
  };

  componentDidMount() {
    fetch("http://localhost:8080/demo/all")
      .then(res => res.json())
      .then(result =>
        this.setState({
          isLoaded: true,
          items: result
        })
      )
      .catch(error =>
        this.setState({
          isLoaded: true,
          error
        })
      );
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading ...</div>;
    } else {
      return (
        <Row gutter={16}>
          {items.map(item => (
              <Col span={6} style={{ margin: '50px 0', padding: '0 20px'}}>
                <Card title={item.name}>    
                  <div className="custom-image">
                    <img alt="example" width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                  </div>
                  <p>{item.description}</p>
                </Card>  
              </Col>
          ))}
        </Row>
        
      );
    }
  }
}


export default App;